<template>
  <GiPageLayout>
    <template #left>
      <UserTree @node-click="handleSelectUser"/>
    </template>
    <template #header>
      <a-tabs v-model:activeKey="activeTab" class="gi_tabs" hide-content size="large">
        <a-tab-pane key="1" title="分成部分"></a-tab-pane>
        <a-tab-pane key="2" title="仪表部分"></a-tab-pane>
        <a-tab-pane key="4" title="艺人归属"></a-tab-pane>
        <a-tab-pane key="3" title="工资发放记录"></a-tab-pane>
      </a-tabs>
    </template>
    <component :is="SettlementList" v-if="activeTab === '1' && userId" :user-id="userId"/>
    <component :is="DataOverview" v-if="activeTab === '2' && userId" :user-id="userId"/>
    <component :is="SalaryLog" v-if="activeTab === '3'  && userId" :user-id="userId"/>
    <component :is="MusicianBind" v-if="activeTab === '4'  && userId" :user-id="userId"/>
  </GiPageLayout>
</template>

<script setup lang="ts">
import UserTree from './tree/index.vue'
import SettlementList from "@/views/settlement/earnings/components/SettlementList.vue";
import DataOverview from "@/views/settlement/earnings/components/DataOverview/index.vue";
import SalaryLog from "@/views/settlement/earnings/components/SalaryLog.vue";
import MusicianBind from "@/views/settlement/earnings/components/MusicianBind.vue";

defineOptions({name: 'Earnings'})

const activeTab = ref('1')

const userId = ref('')

// 根据选中用户查询查询
const handleSelectUser = (keys: Array<any>) => {
  userId.value = keys.length === 1 ? keys[0] : undefined
}
</script>

<style scoped lang="scss"></style>
